<template>
    <div class="categoryList ui-c-f">
        <div v-for="val of list" class="item" track-by="_id"
             :style="{'width':width+'px','height':(height-4)+'px'}"
             v-link="{name:'products',params:{category:val._id,category_name:encodeURIComponent(val.name),brand:0}}">
            <div :style="{'background-image': 'url('+val.pic+'?imageView2/1/w/250/h/250)','height':(height-12)+'px'}">
            </div>
        </div>
    </div>
</template>

<script>
    import Login from './login.vue';
    import http from '../libs/http'

    var apiList = {
        getCategory: api + 'categorypage'
    };

    export default{
        data () {
            return {
                width: window.screen.width / 2,
                height: window.screen.width / 2,
                list: []
            }
        },

        ready: function () {
            var out = this;
            http.get({url: apiList.getCategory, jsonp: true}).then(function (obj) {
                out.list = obj.data || [];
            })
        }
    }
</script>

<style scoped>
    .item {
        float: left;
    }

    .item:nth-child(even) > div {
        margin: 0 8px 8px 4px;
    }

    .item:nth-child(odd) > div {
        margin: 0 4px 8px 8px;
    }

    .item > div {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
</style>